<template>
    <PageLayout :title="title" >
        <scroll-view class="list-box" >
            <view class="seacrch-box">
                <up-search placeholder="请输入电话/用户名/昵称来搜索" v-model="keyword" @search="handleSearch"></up-search>
            </view>
            <up-cell-group border>
                <up-cell v-for="(user,idx) in userList" :key="'selItem-'+idx" border>
                    <template #title>
                        <view class="check-item">
                            <view class="avatar">
                                <u-avatar size="40" :src="user.avatarUrl"></u-avatar>
                            </view>
                            <view>{{user.nickname}}</view>
                        </view>
                    </template>
                    <template #value>
                        <view v-if="user.id!=userStore.user.id">
                            <up-button type="error" size="mini" text="转让" @click="handlerTransfer(user)"></up-button>
                        </view>
                    </template>
                </up-cell>
            </up-cell-group>
            
        </scroll-view>
    </PageLayout>
        
</template>

<script lang="ts" setup>
    import PageLayout from '../../components/myLayout/PageLayout.vue';
    import {ref,onMounted} from "vue"
    import { useProjectStore } from '../../store/projectStore';
    import { MyAlert } from '../../utils/utils';
    import { UserSearchReq } from '../../http/user';
	import { GetProjectUsersReq, ProjectInviteReq, ProjectTransferReq } from '../../http/project';
import { useUserStore } from '../../store/userStore';
    
    const {project} = useProjectStore()
	const userStore = useUserStore()

    const title=ref(project.name+"-项目转让")

    const keyword=ref("")

    const userList=ref([])

    const handlerTransfer=async (user)=>{
		const confirm=await MyAlert({title:'温馨提示',content:`您确定要转让此项目给${user.nickname}?`})
		if(confirm!==true) return
        ProjectTransferReq({pid:project.id,uid:user.id}).then(res=>{
			MyAlert({title:"转让成功",content:"项目已成功转让，请通知受让者进行项目切换"}).finally(()=>{
				uni.reLaunch({
					url:"/pages/index"
				})
			})
        })
    }

    const handleSearch=()=>{
        getProjectUserList()
    }

    const getProjectUserList=()=>{
    	GetProjectUsersReq({}).then(res=>{
			userList.value=res.data.list
        })
    }

	onMounted(() => {
	    getProjectUserList()
	});

</script>

<style lang="scss" scoped>
    .list-box{
        height: 100%;
    }

    .seacrch-box{
        margin: 20upx 0; 
    }
    .check-item{
        display: flex;
        align-items: center;
        .avatar{
            margin-right: 20upx;
        }
    }
</style>
